<!--
 * @Author: zhaozilong
 * @Date: 2022-03-13 09:11:07
 * @LastEditTime: 2023-02-16 18:42:50
 * @LastEditors: smallWhite
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /admin/src/views/home/index.vue
-->
<template>
  <transition
    name="fade-transverse"
    mode="out-in"
  >
    <component
      :is="view"
      v-bind="props"
      @go="linkname"
    />
  </transition>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue'
import ActiveList from './components/list.vue'
export default {
  name: 'HomeIndex',
  components: { ActiveList },
  setup () {
    const data = reactive({
      view: 'ActiveList',
      props: {
        info: {}
      }
    })
    const linkname = (e:any) => {
      data.view = e.view
      data.props.info = e.value
    }
    return {
      ...toRefs(data),
      linkname
    }
  }
}
</script>

<style lang="scss">

.fade-transverse-enter-active,
.fade-transverse-leave-active {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.fade-transverse-enter {
  -webkit-transform: translateX(-30px);
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transverse-enter-to {
  -webkit-transform: translateX(0);
  opacity: 1;
  transform: translateX(0);
}
.fade-transverse-leave-to {
  -webkit-transform: translateX(30px);
  opacity: 0;
  transform: translateX(30px);
}
</style>
